<template>
  <div class="login">
    <div class="HeadPortrait">
      <img src="../../commpent/images/timg.jpg" alt>
    </div>
    <ul>
      <li>
        <i class="iconfont icon-dengluzhanghao"></i>
        <el-input type="text" clearable placeholder="工号" v-model="form.username"></el-input>
      </li>
      <li>
        <i class="iconfont icon-APPicon-"></i>
        <el-input
          type="text"
          clearable
          placeholder="登录密码"
          v-model="form.password"
          v-show="PasswordShow"
        ></el-input>
        <el-input
          type="password"
          clearable
          placeholder="登录密码"
          v-model="form.password"
          v-show="Passwordfalse"
        ></el-input>
        <i class="iconfont icon-xianshimima" @click="Password(true)" v-show="PasswordShow"></i>
        <i class="iconfont icon-yincangmima" @click="Password(false)" v-show="Passwordfalse"></i>
      </li>
      <li>
        <i class="iconfont icon-yanzhengma"></i>
        <el-input type="text" clearable placeholder="验证码" v-model="form.captcha"></el-input>
        <img :src="url" alt @click="loginTimesS()" class="LoginTimes">
      </li>
    </ul>
    <router-link to="/login" class="ForgetPassword">忘记密码</router-link>
    <mt-button type="primary" @click.prevent="onSubmit" class="Submit">登录</mt-button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { MessageBox } from 'mint-ui';
export default {
  name: "HelloWorld",
  data() {
    return {
      password: "",
      PasswordShow: true,
      Passwordfalse: false,
      dataCount: this.$store.state.userInfo1, //用data接收,
      uuid: this.getUUID(),
      url: "",
      urlData: "http://103.10.87.51:8092/auth/captcha?uuid=",
      form: {
        username: null,
        password: null,
        captcha: null,
        uuid: null
      },
      routerPath: "./"
    };
  },
  created() {},
  computed: {
    ...mapState(["userInfo1"]),
    // console.log(...mapGetters(['userInfo']))
    a() {
      return this.$store.state.userInfo1;
    }
  },
  mounted() {
    this.loginTimesS();
    this.getUUID();
  },
  watch: {
  },
  methods: {
    //uuid
    getUUID() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
        return (c === "x"
          ? (Math.random() * 16) | 0
          : "r&0x3" | "0x8"
        ).toString(16);
      });
    },
    //显示密码
    Password(val) {
      this.PasswordShow = !val;
      this.Passwordfalse = val;
    },
    onSubmit() {
      this.$store.dispatch('test','123')
      let payload = {};
      Object.keys(this.form).forEach(key => {
        if (this.form[key]) {
          payload[key] = this.form[key];
        }
      });
      this.$store.dispatch("login", payload).then(data => {
        if (data == null) {
          this.loginTimesS();
        } else {
          window.setTimeout(() => {
            window.localStorage.setItem("LOGINTIMES", 0);
            this.$router.push({
              path: this.routerPath
            });
          }, 1000);
        }
      });
      
    },
    loginTimesS() {
      this.getUUID();
      var uuid = this.getUUID();
      this.url = this.urlData + uuid;
      this.form.uuid = uuid;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.login input::-webkit-input-placeholder {
  font-size: 0.22rem;
}
.login input {
  font-size: 0.22rem;
}
.login .el-input--suffix .el-input__inner {
  padding-right: 0px;
}
.login .ForgetPassword {
  display: inline-block;
  width: 6rem !important ;
  text-align: right;
  font-size: 0.22rem;
  color: #26a2ff;
  margin-top: 0.2rem;
}
.login .el-input {
  width: 86% !important;
  border: none;
  margin-left: 0.2rem;
}
.login .el-input input {
  height: 0.5rem;
  line-height: 0.5rem;
  border: 1px solid #fff;
}
.login li:nth-child(3) .el-input {
  width: 40% !important;
}
.login ul {
  width: 6rem;
  margin: 0 auto;
}
.login ul li {
  padding: 0.2rem;
  margin-top: 0.2rem;
  border-bottom: 1px solid #eee;
  text-align: left;
  display: flex;
  align-items: center;
}
.login i {
  font-size: 0.28rem;
}
.login .box {
  width: 100%;
  height: 2rem;
  background: rgb(201, 17, 17);
}
.login .HeadPortrait {
  width: 3rem;
  margin: 0 auto;
  height: 3rem;
}
.login .HeadPortrait img {
  width: 100%;
}
.login .Submit {
  margin-top: 0.2rem;
  width: 5rem;
  height: 0.7rem;
  font-size: 0.3rem;
  border-radius: 1rem 1rem 1rem 1rem;
}
.login .LoginTimes{
  width: 50%;
  float: right;
  cursor: pointer;
}
.login {
  margin-top: 1.5rem;
}
</style>
